<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/together.css">
    <link rel="stylesheet" href="css/book.css">

    <!--Vue框架开始-->
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <!--Vue框架结束-->

</head>
<body>
<div class="container-fluid">
    <!--导航栏开始-->
    <div id="nav"></div>
    <!--导航栏结束-->

    <!--主体开始-->
    <div style="margin-top: 55px;">
        <div class="row row-no-gutters">
            <div class="col-xs-3 col-md-1"  >

            </div>

            <div class="col-xs-3 col-md-9" style="background-color: #1C2B40; height: 500px;margin: 0px 0px 0px 27px;padding: 0px;" >
                <div id="app">
                    <!-- 路由匹配到的组件将渲染在这里 -->
                    <router-view></router-view>
                </div>

            </div>
            <div id="book" class="col-xs-12 col-md-1" style=" ">

            </div>
        </div>

        <div class="row row-no-gutters">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>

    </div>
    <!--主体结束-->

    <!--图书界面开始-->
    <template id="self-main">
        <!--template只认一个div-->
        <div>
            <div  style="background-color: #177194;height: 40px;">
                <p style="text-align: center;line-height: 40px;">图书分类</p>
            </div>
            <div>
                <div id="ul">
                    <ul>
                        <li>
                            <router-link to="/book/education" style="padding: 12px 36px;">教育</router-link>
                        </li>
                        <li>
                            <router-link to="/book/novel" style="padding: 12px 36px;">小说</router-link>
                        </li>
                        <li>
                            <router-link to="/book/art" style="padding: 12px 36px;">文艺</router-link>
                        </li>
                        <li>
                            <router-link to="/book/literature" style="padding: 12px 22px;">青春文学</router-link>
                        </li>
                        <li>
                            <router-link to="/book/science" style="padding: 12px 22px;">人文社科</router-link>
                        </li>
                        <li>
                            <router-link to="/book/although" style="padding: 12px 36px;">经管</router-link>
                        </li>
                        <li>
                            <router-link to="/book/success" style="padding: 12px 22px;">成功励志</router-link>
                        </li>
                        <li>
                            <router-link to="/book/although" style="padding: 12px 36px;">生活</router-link>
                        </li>
                        <li>
                            科技
                        </li>
                        <li>
                            英文原版书
                        </li>
                        <li>
                            其它
                        </li>

                    </ul>
                </div>
                <div  style="background-color: #2E2D3C;height: 500px;">
                    <router-view></router-view>
                </div>

            </div>
        </div>
    </template>
    <script>
        var selfBook = Vue.component('self-main', {
            template: '#self-main',
        });
    </script>
    <!--图书界面结束-->

    <!--教育图书开始-->
    <template id="education">
        <div>
            <h1 style="color:#fff;">您选择的是教育书籍</h1>
        </div>
    </template>
    <script>
        var education = Vue.component('education', {
            template: '#education',

        });
    </script>
    <!--教育图书结束-->

    <!--小说开始-->
    <template id="novel">
        <div>
            <h1 style="color:#fff;">小说</h1>
        </div>
    </template>
    <script>
        var novel=Vue.component('novel',{
            template:'#novel',
        });
    </script>

    <!--小说结束-->

    <!--文艺开始-->
    <template id="art">
        <div>
            <h1 style="color:#fff;">文艺</h1>
        </div>
    </template>
    <script>
        var art=Vue.component('art',{
           template:'#art'
        });
    </script>
    <!--文艺结束-->

    <!--青春文学开始-->
    <template id="literature">
        <div>
            <h1 style="color:#fff;">青春文学</h1>
        </div>
    </template>
    <script>
        var literature=Vue.component('literature',{
           template:'#literature'
        });
    </script>
    <!--青春文学结束-->

    <!--人文社科开始-->
    <template id="science">
        <div>
            <h1 style="color:#fff;">人文社科</h1>
        </div>
    </template>
    <script>
        var science=Vue.component('science',{
           template:'#science'
        });
    </script>
    <!--人文社科结束-->

    <!--经管开始-->
    <template id="although">
        <div>
            <h1 style="color:#fff;">经管</h1>
        </div>
    </template>
    <script>
        var although=Vue.component('although',{
           template:'#although'
        });
    </script>
    <!--经管结束-->

    <!--成功励志开始-->
    <template id="success">
        <div>
            <h1 style="color:#fff;">成功励志</h1>
        </div>
    </template>
    <script>
        var success=Vue.component('success',{
            template:'#success'
        })
    </script>
    <!--成功励志结束-->
</div>


<script>
    /*导航栏引进开始*/
    $(document).ready(function () {
        $('#nav').load('navigation.html');
    });
    /*导航栏引进结束*/
</script>

<script>
    var router = new VueRouter({
        routes:[
            {
                path:'/',
                redirect(){
                    return '/book';
                }
            },
            {
                path: '/book',
                component: selfBook,

                // 子路由，和routes一样，不加路径的/
                children: [
                    {
                        path: 'education', // /main/list
                        name: '教育',
                        component: education
                    },
                    {
                      path: 'novel',
                      name: '小说',
                      component: novel
                    },
                    {
                      path: 'art',
                      name: '文艺',
                      component: art
                    },
                    {
                        path: 'literature',
                        name:'青春文学',
                        component: literature
                    },
                    {
                        path: 'science',
                        name: '人文社科',
                        component: science
                    },
                    {
                        path: 'although',
                        name: '经管',
                        component: although
                    },
                    {
                        path: 'success',
                        name: "成功励志",
                        component: success
                    }
                ]
            },

        ]
    });

    var vue = new  Vue({
        el: '#app',
        router
    });
</script>
</body>
</html>